<script setup>
import Lbt from './Lbt.vue';
</script>
<template>
    <div class="page">
        <div class="head">
            <img src="@/assets/logo.png">
            <span>欢迎进入游戏盒子</span>
        </div>
        <div class="ner">
            <input type="text" placeholder="搜索最近热搜游戏" />
        </div>
        <div class="title">
            <Lbt></Lbt>
        </div>
        <div class="game">
            <div>
                <img src="../assets/Wgame.png" alt="">
                <div class="ys">
                    <span>王者荣耀</span>
                    <span>多人竞技场，王者峡谷里快来与我们相遇吧！</span>
                    <span>点击查看详情</span>
                </div>
            </div>
            <div>
                <img src="../assets/jcc.jpg" alt="">
                <div class="ys">
                    <span>金铲铲之战</span>
                    <span>在棋盘上玩出快乐，观看英雄奋力出击，只为赢得比赛</span>
                    <span>点击查看详情</span>
                </div>
            </div>
            <div>
                <img src="../assets/Dz.png" alt="">
                <div class="ys">
                    <span>蛋仔派对</span>
                    <span>玩出花样地图，蛋小黄在游戏中等你，快来认领你的蛋仔吧！</span>
                    <span>点击查看详情</span>
                </div>
            </div>
            <div>
                <img src="../assets/Five.png" alt="">
                <div class="ys">
                    <span>第五人格</span>
                    <span>智慧烧脑，重重危机等你来挑战</span>
                    <span>点击查看详情</span>
                </div>
            </div>
            <div>
                <img src="../assets/Fnxn.png" alt="">
                <div class="ys">
                    <span>愤怒的小鸟</span>
                    <span>居然有小猪要攻击我们的城堡？和我一起来守护吧！让我们一起打到它</span>
                    <span>点击查看详情</span>
                </div>
                
            </div>
        </div>
    </div>
</template>
<style scoped>
.page {
    width: 375px;
    height: 100vh;
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow:  -2px 2px 10px #ccc;
}

.head {
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    margin-top: 5px;
}

.head span {
    width: 150px;
}

.head img {
    width: 100px;
}

.ner {
    width: 375px;
    padding: 0 20px;
    margin-top: 10px;
}

.ner input {
    width: 340px;
    height: 30px;
    border-radius: 50px;
    border: #ccc 1px solid;
    outline: none;
}

input::-webkit-input-placeholder {
    /* placeholder颜色  */
    color: #aab2bd;
    /* placeholder字体大小  */
    font-size: 12px;
    /* placeholder位置  */
    text-align:center;
}
.title{
    width: 100%;
    height: 165px;
    margin-top: 10px;
    text-align: center;
}
.game{
    display: flex;
    flex-direction: column;
}
.game>div{
    display: flex;
    margin-top: 10px;
}
.game img{
    width: 150px;
    height: 100px;
}
.game .ys{
    width: 219px;
    height: 100px;
    display: flex;
    flex-direction: column; 
    margin-left: 5px;
}
.game .ys>span:nth-child(1){
    font-size: 16px;
    font-weight: bold;
}
.game .ys>span:nth-child(3){
    width: 60px;
    height: 30px;
    line-height: 30px;
    font-size: 8px;
    text-align: center;
    border: #eee 1px solid;
    border-radius: 20px;
    border-bottom-color: #ccc;
    border-right-color: #ccc;
    color: rgb(153, 207, 240);
    margin-top: 10px;
}
</style>